<template>
  <!-- 动画小球 -->

  <div class="goodsinfor-content">
    <transition @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter">
      <div class="Ball" v-show="ballFlag" ref="ball"></div>
    </transition>

    <!-- 轮播区域 -->
    <div class="mui-card">
      <div class="mui-card-content">
        <div class="mui-card-content-inner">
          <swiper :imglist="lunbolist" :isfull="false"></swiper>
        </div>
      </div>
    </div>
    <!-- 商品购买区域 -->
    <div class="mui-card">
      <div class="mui-card-header">{{GoodInfo.title}}</div>
      <div class="mui-card-content">
        <div class="mui-card-content-inner">
          <p class="price">
            市场价:
            <del>{{GoodInfo.market_price}}</del>
            销售价:
            <span class="now_price">{{GoodInfo.sell_price}}</span>
          </p>
          <!-- 此处的数组选择框 需要导入外部组件，因为在购物车也有一个同样的数字选择框，但是实现的逻辑逼样，所以需要分开来导入到需要的地方-->
          <p class="buyNum">
            购买数量:
            <numberBtn @getcount="getSelectedCont" :max="GoodInfo.stock_quantity"></numberBtn>
          </p>
          <!-- 设置数字按钮的最大值和最小值，就是通过父组件向子组件传值来传递最大值也就时将库存量传递过去 -->
          <p class="butBtn">
            <mt-button type="primary">立即购买</mt-button>
            <mt-button type="danger" @click="ballFlag=true">加入购物车</mt-button>
          </p>
        </div>
      </div>
    </div>
    <!-- 商品详情区域 -->
    <div class="mui-card">
      <div class="mui-card-header">商品详情</div>
      <div class="mui-card-content">
        <div class="mui-card-content-inner">
          <div class="goodsDetails">
            <p>商品货号:{{GoodInfo.goods_no}}</p>
            <p>库存情况:{{GoodInfo.stock_quantity}}</p>
            <p>上架时间:{{GoodInfo.add_time | dateFormat}}</p>
          </div>
        </div>
      </div>
      <div class="mui-card-footer">
        <mt-button type="primary" size="large" plain class="firstBtn" @click="goGoodsDesc(id)">图文介绍</mt-button>
        <mt-button type="danger" size="large" plain @click="goGoodsComment(id)">商品评论</mt-button>
      </div>
    </div>
  </div>
</template>
/**
分析：数字按钮中的数据发生变化，相应的购物车徽章也发生改变 当点击加入购物车的时候。徽章发生相应数据的变化
难点: 怎么获取柿子按钮中变化的数据，徽章发生相应的改变
涉及知识：vue中的组件传值 监听数据变化的change事件（采用了方法二）方法一是给+ ,-，数字框分别写一个get方法(比较麻烦) 通过父组件把方法传递给子组件，子组件获取方法，得到的参数以方法的形式又传递给父组件
 */
<script>
import swiper from "../componentssub/swiper.vue";
import numberBtn from "../componentssub/numberBtn.vue";
export default {
  data() {
    return {
      id: this.$route.params.id, // 将路由参数对象中的 id 挂载到 data , 方便后期调用
      lunbolist: [],
      GoodInfo: [],
      ballFlag: false,
      selectedCount: 1 //保存数据
    };
  },
  created() {
    this.getLunBo();
    this.getGoodsInfo();
  },
  methods: {
    // 获取顶部轮播图
    getLunBo() {
      this.$http.get("api/getthumimages/" + this.id).then(result => {
        if (result.data.status === 0) {
          // 循环获得结果的每一项，为item添加img属性，因为轮播组件中认识的是img不是src
          result.data.message.forEach(item => {
            item.img = item.src;
          });
          this.lunbolist = result.data.message;
        }
      });
    },
    // 获取商品详情与介绍
    getGoodsInfo() {
      this.$http.get("api/goods/getinfo/" + this.id).then(result => {
        this.GoodInfo = result.data.message[0];
        console.log(result);
      });
    },
    // 编程式跳转 this.$router .push({name:'路由名字',params:{id}})
    // 跳转到图文介绍模块
    goGoodsDesc(id) {
      this.$router.push({ name: "GoodDesc", params: id });
    },
    // 跳转到商品评论模块
    goGoodsComment(id) {
      this.$router.push({ name: "GoodsComment", params: id });
    },
    // 获取子组件传来的
    getSelectedCont(count) {
      // 将获取的数据传递给父组件
      this.selectedCount = count;
      console.log("父组件拿到的值为:" + this.selectedCount);
    },
    beforeEnter(el) {
      el.style.transform = "translate(0,0)";
    },
    // 分辨率的改变让小球的动画不精准的原因:1.我们把小球结束的位置设置了一个固定的位置，当分辨路改变，位置不会改变，就会出现小球动画不精准的问题
    // 解决思路:小球唯一问题是位置固定，那么我们在给小球位置的时候不给定固定位置，通过js中的domObject.getBundingClientRect()来灵活的获取小球距离页面x和y的距离，在获取底部导航栏上购物车距离页面x和y的距离，在将他们两个x和x的差，y和y的差来求得动画移动的不确定的距离来实现小球的完美动画
    // js 中的getBundingClientRect() 中获取元素需要操作DOM，在获取徽章的时候需要从操作DOM，调用textRectangle具有的left ，right，top，bottom 属性 得出相对于浏览器的偏移值
    // 使用：var box=document.getElementById('box');         // 获取元素
    //alert(box.getBoundingClientRect().top);         // 元素上边距离页面上边的距离
    //alert(box.getBoundingClientRect().right);       // 元素右边距离页面左边的距离
    //alert(box.getBoundingClientRect().bottom);      // 元素下边距离页面上边的距离
    //alert(box.getBoundingClientRect().left);        // 元素左边距离页面左边的距离
    enter(el, done) {
      el.offsetWidth;
      // 获取小球在页面中的位置
      const ballPosition = this.$refs.ball.getBoundingClientRect();
      // 手动操作Dom元素获取徽章获取徽章的位置
      const badgePosition = document
        .getElementById("badge")
        .getBoundingClientRect();
      const xDisc = badgePosition.left - ballPosition.left;
      const yDisc = badgePosition.top - ballPosition.top;
      // `es6的模板字符串`
      el.style.transform = `translate(${xDisc}px,${yDisc}px)`;
      el.style.transition = "all 0.5s cubic-bezier(.4,-0.3,1,.68)";
      done();
    },
    afterEnter(el) {
      this.ballFlag = !this.ballFlag;
    }
  },
  // 定义私有组件
  components: {
    swiper,
    numberBtn
  },
  props: ["max"],
  watch: {
    max: function(newVal, oldVal) {
      mui(".mui-numbox")
        .numbox()
        .setOption("max", newVal);
    }
  }
};
</script>
<style lang="scss" scoped>
.goodsinfor-content {
  overflow: hidden;
  background-color: #ecdeea;

  .now_price {
    color: #dd3232;
    font-size: 16px;
    font-weight: 700;
  }
  .butBtn {
    text-align: center;
  }
  .mui-card-footer {
    display: block;
  }
  .firstBtn {
    margin-bottom: 5px;
  }
  .Ball {
    width: 18px;
    height: 18px;
    background: #c81632;
    z-index: 999;
    position: absolute;
    border-radius: 50%;
    top: 406px;
    left: 139px;
  }
}
</style>


